<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :xl="12" :lg="16" :md="18" :sm="24" :xs="24">
        <div class="header-container clearfix">
          <el-row type="flex" justify="space-between">
            <el-col :span="4" :xs="12">
              <logo class="header-icon"></logo>
            </el-col>
            <el-col :span="14" class="hidden-sm-only">
              <el-menu
                mode="horizontal"
                class="header-menu el-menu-demo"
                active-text-color="#41b883"
                @select="handleSelect"
                :default-active="activeMenuIndex"
                v-if="isUserLogged">
                <el-menu-item
                  class="header-menu-item"
                  v-for="menu in menus"
                  :index="menu.name"
                  :key="menu.name"
                  @click="menuClick(menu)">
                  {{ menu.name }}
                </el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="6" :xs="12">
              <div class="header-btn-group">
                <el-button class="header-btn" v-for="btn in buttons" :type="btn.type" @click="go(btn.path)" :key="btn.name" v-if="!isUserLogged">{{ btn.name }}</el-button>
                <el-popover placement="bottom" trigger="hover" v-if="isUserLogged">
                  <el-avatar slot="reference">{{ currentUserName ? currentUserName.charAt(0) : 'user' }}</el-avatar>
                  <el-row type="flex" justify="left">
                    <el-button class="menu-button" size="medium" type="text" icon="el-icon-user" disabled>
                      <span style="color: #3ba676; font-weight: bold">{{ currentUserName ? currentUserName : 'user' }}</span>
                    </el-button>
                  </el-row >
                  <el-divider class="menu-divider"></el-divider>
                  <el-row type="flex" justify="left">
                    <el-button @click="go('/user/info')" class="menu-button" size="medium" type="text" icon="el-icon-edit-outline">编辑个人资料</el-button>
                  </el-row >
                  <el-divider class="menu-divider"></el-divider>
                  <el-row type="flex" justify="left">
                      <el-button @click="go('/password')" title="修改密码后需要重新登录" class="menu-button" size="medium" type="text" icon="el-icon-edit-outline">修改密码</el-button>
                  </el-row>
                  <el-divider class="menu-divider"></el-divider>
                  <el-row type="flex" justify="left">
                      <el-button title="退出账号将清空缓存数据" class="menu-button" size="medium" type="text" @click="logOut" icon="el-icon-switch-button">退出当前账号</el-button>
                  </el-row >
                </el-popover>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row v-if="divider">
      <el-divider class="header-divider"></el-divider>
    </el-row>
  </div>
</template>

<script>
import Logo from '@/components/Logo'
import {isLogged} from '@/api/login'
import UserInfo from '@/components/UserInfo'
export default {
  name: 'Header',
  components: {
    Logo,
    UserInfo
  },
  props: {
    divider: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      msg: 'Hello Base Head!',
      menus: [
        {
          name: '工作台',
          msg: '跳转到工作台',
          path: '/dashboard'
        },
        {
          name: '项目',
          msg: '跳转项目管理页面',
          path: '/project'
        },
        {
          name: '待办任务',
          msg: '跳转进度管理页面',
          path: '/todo'
        },
        {
          name: '文档库',
          msg: '跳转文档库页面',
          path: '/document'
        }
      ],
      buttons: [
        {
          name: '登录',
          path: '/login',
          type: '',
          role: [
            'db',
            'super'
          ]
        },
        {
          name: '注册',
          path: '/register',
          type: 'primary',
          role: [
            'db',
            'super'
          ]
        }
      ],
      activeMenuIndex: this.$store.getters.currentMenu
    }
  },
  methods: {
    menuClick (menu) {
      this.go(menu.path)
    },
    go (url) {
      this.$router.push(url)
    },
    logOut () {
      this.$store.dispatch('LogOut', this.$store).then(() => {
        this.$notify.success({
          type: 'success',
          title: '登出成功',
          message: '用户已登出'
        })
        this.$store.dispatch('ClearCache')
        this.$router.push('/')
      }).catch(() => {
        this.$notify.success({
          type: 'warning',
          title: '登出失败',
          message: '用户登出失败'
        })
      })
    },
    handleSelect (key) {
      // this.$store.dispatch('SetCurrentMenu', key)
    }
  },
  computed: {
    isUserLogged () {
      return isLogged()
    },
    currentUserName () {
      return this.$store.getters.name
    }
  }
}
</script>

<style lang="scss" scoped>
.header-container {
  text-align: center;
}
.el-menu.el-menu--horizontal {
  border: none;
}
.header-container,.header-menu,.header-menu-item {
  height: 60px;
}
.clearfix {
  display: block;
  zoom: 1;
}
.header-menu-item,.header-btn {
  font-size: 16px;
}
.header-btn {
  padding: 0 20px;
  height: 40px;
  line-height: 1.5;
}
.header-btn-group {
  float: right;
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: 20px;
}
.header-menu {
  float: left;
}
.header-menu-item {
  line-height: 80px;
}
.header-icon {
  float: left;
  width: 120px;
}
.header-divider {
  margin: 1px;
}
.flex-center {
  display: flex;
  justify-content: center;
}
.menu-divider {
  margin: 8px 0;
}
.menu-button {
  color: #262626;
}
</style>
